<template>
  <!-- template 下必须包含一个根HTML标签 -->
  <div class="home" style="display:none" ref="initStyle">
    <!-- <face-img-list v-bind:faceImgList="faceImgList" v-bind:havePage="havePage"/> -->
    <div>
      <div class="serach-link">
        <router-link :to="{ name: 'ProductSearch'}" class="search-cont" tag="div" style="text-align:left;text-indent: 8px"><span class="iconfont icon-sousuo-copy"></span>搜索你想要的商品</router-link>
        <router-link :to="{ name: 'ProductBrand'}" class="search-brand" tag="div" >品牌</router-link>
      </div>
      <div style="height:52px;"></div>
      <wc-swiper v-if="iOS_num >= 10 && faceImgList.length > 0">
        <wc-slide v-for="(slide, key) in faceImgList" :key="key" >
          <a v-if="slide.link" :href="slide.link"><img :src="slide.url" width="100%"></a>
          <img v-else :src="slide.url" width="100%">
        </wc-slide>
        <div slot="pagination"></div>
      </wc-swiper>
      <swiper v-if="iOS_num < 10 && faceImgList.length > 0" :options="swiperOption" ref="mySwiper">
        <swiper-slide v-for="item in faceImgList" key="item">
          <div class="item"  v-if="item.link">
            <a :href="item.link"><img :src="item.url" width="100%"></a>
          </div>
          <div class="item"  v-else>
            <img :src="item.url" width="100%">
          </div>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination" v-show="havePage"></div>
      </swiper>
    </div>
    <!-- 分类 -->
    <div class="home-cate">
      <ul >
        <!-- <li v-for="(item,index) in cateList" @click="route('ProductList',{categoryId: item.categoryId})"> -->
        <!-- <router-link :to="{ name: 'ProductList', params: { categoryId: item.id}}" v-for="item in cateList"  tag="li" :key="item.index" > -->
        <router-link :to="{ name: 'ProductCateList', params: { categoryId: item.id}}" v-for="item in cateList"  tag="li" :key="item.index" >
          <div><img :src="item.logo"></div>
          <p>{{item.name}}</p>
        </router-link>
        <!-- <li>
          <div><img src="/static/them/c2.png"></div>
          <p>尿裤湿巾</p>
        </li>
        -->
      </ul>
    </div>
    <!-- 广告位 -->
    <a href="https://app.jzdoctor.com/ac-web/#/?v=0.03" style="display:block;"><img src="https://app.jzdoctor.com/ec-web/static/adv/aply1.png" style="width: 100%;display:block;"></a>
    <div class="home-pro" v-if="cateImgList.length > 0">
      <!-- <div><img src="https://testapp.jzdoctor.com/ec-web/static/them/come1.jpg"></div>
      <div><img src="https://testapp.jzdoctor.com/ec-web/static/them/come2.jpg"></div> -->
      <div v-for="item in cateImgList" ><a :href="item.link"><img :src="item.imgurl"></a></div>
      <!-- <div><img src="/static/them/cate2.png"></div> -->
    </div>
    <!-- 编辑模板代码 -->
    <div class="page-index f-fs2" id="page-index">
      <!-- <ul class="m-icon f-cb">
        <router-link :to="{ name: 'ProductList', params: { trademarkId: item.id,trademarkName: item.name }}" v-for="item in trademark"  tag="li" :key="item.index" >
          <span   v-bind:style="{backgroundImage: 'url(' + item.imgurl + ')'}" ></span>
          <p>{{ item.name }}</p>
        </router-link>
      </ul> -->
    <!--
      <div class="u-active">
        <div class="u-hd">
          <span>团购商品</span>
        </div>
        <div class="m-activebox">

          <swiper :options="swiperOption">
            <swiper-slide v-for="item in activeGroups" :key="item" >
              <div class="item">
                <span class="u-vimg"  v-bind:style="{backgroundImage: 'url(' + item.productBase.faceUrl + ')'}" ></span>
                <div class="u-tex">
                  <p class="name">{{ item.name }}</p>
                  <p class="min">{{ item.joinSize }}人成团，已售{{item.joinedSize}}件</p>
                  <span class="price"><em>￥</em>{{ item.activePrice }}</span>
                </div>
                <router-link v-bind:to="'/active/group/' + item.activeGroupId"  class="m-btn-min m-btn-info">立即团购</router-link>
              </div>
            </swiper-slide>
            <div class="swiper-pagination" slot="pagination"></div>
          </swiper>
        </div>
      </div>
-->
      <!--
     <div class="u-products" v-for="item in products" :key="item">

       <div class="u-hd">
         <span>{{ item.trademarkName }} </span>
       </div>
       <div class="m-productbox">
         <router-link  tag="div" class="item" v-for="pds in item.items"  :key="pds" :to="{ name: 'ProductDetail', params: { productId: pds.productId }}">
           <span class="u-vimg" v-bind:style="{backgroundImage: 'url(' + pds.faceUrl + ')'}"></span>
           <div class="u-tex">
             <p class="name f-line-b"><em v-if="pds.subType == 2">季</em>{{ pds.name }}</p>
             <p class="min">{{ pds.commentSize }}评价，已售{{ pds.soldSize }}件</p>
             <span class="price"><em>￥</em>{{ pds.payPrice }}</span>
           </div>
           <span class="m-btn-min m-btn-info">立即购买</span>
         </router-link>
       </div>
     </div>
-->
      <div class="m-pro f-cb" style="margin-top:0;padding:0;background:transparent" v-scroll="getMore">
        <div class="u-hd" style="border-bottom:1px solid #f2f2f2">
          <span> 热 <i>/</i> 门 <i>/</i> 商 <i>/</i> 品 </span>
        </div>
        <div class="clearfix"></div>
          <router-link  tag="div" class="u-item" v-for="(pds, index) in products" v-if="pds.indexShow"  :key="pds.index" :to="{ name: 'ProductDetail', params: { productId: pds.id }}">
            <em class="icon-tex-info" v-if="pds.subType == 3">预</em>
            <em class="icon-tex-info" v-if="pds.subType == 2">季</em>
            <!-- <em class="icon-tex-stock" v-if="pds.soldOut">已下架</em>
            <em v-else>
              <em class="icon-tex-stock" v-if="!pds.stock">无货</em>
            </em> -->
            <div class="shop-act" v-if="pds.coupons && pds.coupons.length > 0 && !pds.coupons[0].invalid">{{pds.coupons[0].name}}</div>
            <!-- <img :src="pds.faceUrl" onerror="this.src='/static/img/defimg.jpg'" lazy="loaded"> -->
            <div style="position: relative;overflow: hidden;">
              <div class="cart-status index" v-if="pds.soldOut">
                <div class="text">已下架</div>
                <div style="opacity: .8">Sold out</div>
              </div>
              <div v-else>
                <div class="cart-status index" v-if="!pds.stock">
                  <div class="text">已售罄</div>
                  <div style="opacity: .8">Sell out</div>
                </div>
              </div>
              <img v-lazy="pds.faceUrl" class="lazy-fadein">
              <div class="shop-listdes" v-if="pds.description" >{{pds.description}}</div>
            </div>
            <!-- <div class="show-img">
        　　　　<img class="default-image" :src="pds.faceUrl" @load="successLoadImg" @error="errorLoadImg">
        　　</div> -->
            <!-- <img src="/static/img/defimg.png" > -->
            <!-- <img :src="pds.faceUrl" v-else> -->
            
            <p  class="name f-line-b">{{ pds.name }}</p>
            <p class="price">
              <span class="this-price">￥ {{ pds.payPrice }}</span>
              <span class="del-price">￥{{ pds.price }} </span>
            </p>
            <!-- <p class="info">
              <span>已售{{ pds.soldSize }}件</span>
              <Span><i class="iconfont icon-comments"></i> {{ pds.commentSize }}</Span>
            </p> -->
          </router-link>
      </div>
      <div id="l-more"></div>
    </div>
  </div>
</template>
<script>
  import Vue from 'vue'
  import wcSwiper from 'wc-swiper'
  import 'wc-swiper/style.css'
  Vue.use(wcSwiper)
  import VueAwesomeSwiper from 'vue-awesome-swiper'
  require('swiper/dist/css/swiper.css')
//  import JzHttp from '@/common/js/http.js'
  Vue.use(VueAwesomeSwiper)
  /* 再此定义JS，采用ES6标准格式 */
  /* JzHttp.init({
    baseUrl: 'https://app.jzdoctor.com/ec/',
    unionid: 'o5WoIuMoTxxz7oAVNS1jWE-1TKas',
    appid: 'wx6d919ab5d537abda',
    appType: JzHttp.APP_TYPE.WECHAT_APP,
    rqError: function (error) {
      console.log('我是自定义请求错误处理函数', error)
    },
    rpError: function (error) {
      /!* 此处处理如http状态码404，500等错误 *!/
      console.log('我是自定义响应错误处理函数', error)
    }
  }) */

  /* 此处假设productId，markId，activeGroupId */
  export default {
    name: 'Home',
    components: {
      // FaceImgList
    },
    data () {
      return {
        iOS_num: 9,
        productId: 1,
        markId: 2,
        categoryId: 0,
        activeGroupId: 2,
        trademark: [],
        activeGroups: [],
        products: [],
        swiperOption: {
          pagination: '.swiper-pagination',
          paginationClickable: true,
          observeParents: true
        },
        // banner
        faceImgList: [
          // {
          //   url: 'https://testapp.jzdoctor.com/ec-web/static/them/banner.png',
          //   href: ''
          // }
        ],
        cateImgList: [],
        havePage: false,
        cateList: [],
        // page
        isactive: false,
        isfined: false,
        pageindex: 1
        // search
        // keyword: '222'
      }
    },
    methods: {
      // 获取分类
      getCate: function () {
        let _this = this
        this.$EcHttpUtils.get('product/category/list.json').then(function (ret) {
          if (ret.data.statusCode === 0) {
            _this.cateList = ret.data.data
          }
        })
      },
      getProduct: function () {
        if (this.isactive || this.isfined) {
          if (this.isactive) {
            Vue.prototype.$tools.lookmore(true, false)
          }
          if (this.isfined) {
            Vue.prototype.$tools.lookmore(true, true)
          }
          return false
        }
        let _this = this
        this.isactive = true
        this.$EcHttpUtils.get('product/list.json', {indexShow: true, pageSize: 10, index: _this.pageindex}).then(function (resp) {
          // console.log(_this.$refs.initStyle)
          if (_this.$refs.initStyle) {
            _this.$refs.initStyle.style.display = 'block'
          }
          _this.isactive = false
          Vue.prototype.$tools.lookmore(true, false)
          if (resp.data.statusCode === 0) {
            if (resp.data.data) {
              let products = resp.data.data.records
              if (products.length <= 0) {
                // _this.isshow = true
                Vue.prototype.$tools.lookmore(true, true)
                _this.isfined = true
                return false
              }
              if (resp.data.data.totalCount <= 10) {
                if (products.length > 0) {
                  Vue.prototype.$tools.lookmore(true, true)
                }
                _this.isfined = true
              }
              _this.products = _this.products.concat(products)
              _this.pageindex++
            }
          }
        })
      },
      getActivegroup: function () {
        let _this = this
        this.$EcHttpUtils.get('active/group/list.json'
        )
          .then(function (resp) {
            if (resp.data.data) {
              let arr = Array.from(resp.data.data.records)
              for (var value of arr) {
                _this.activeGroups.push(value)
              }
            }
          })
      },
      getTrademark: function () {
        let _this = this
        this.$EcHttpUtils.get('product/trademark/list.json')
          .then(function (resp) {
            let arr = Array.from(resp.data.data)
            for (var value of arr) {
              _this.trademark.push(value)
            }
          })
      },
      route: function (url, param) {
        this.$router.push({
          path: url,
          query: param
        })
      },
      // banner
      bannerList: function () {
        /* eslint-disable no-undef */
        let _this = this
        this.$EcHttpUtils.get('ad/index.json')
          .then(function (resp) {
            if (resp.data.statusCode === 0) {
              let ret = resp.data.data.data
              let cateImgList = []
              let faceImgList = []
              if (ret.adConfig1) {
                cateImgList.push(ret.adConfig1)
              }
              if (ret.adConfig2) {
                cateImgList.push(ret.adConfig2)
              }
              // console.log('ret === ')
              // console.log(ret)
              ret.carousel.forEach(function (v, k) {
                let obj = {
                  url: v.imgurl,
                  link: v.link
                }
                faceImgList.push(obj)
              })
              _this.faceImgList = faceImgList // banner
              _this.cateImgList = cateImgList // cate img
              // var mySwiper = new Swiper('.swiper-container', {
              //   autoplay: 2000,
              //   pagination: '.swiper-pagination',
              //   paginationClickable: true,
              //   observer: true
              // })
              // console.log(mySwiper)
            }
          })
      },
      init () {
        // this.getTrademark() // 品牌
        this.bannerList()
        this.getProduct()
        this.getCate()
        // 搜索框效果
        // var bannerH = 145
        // var serach = this.$el.querySelectorAll('.serach-link')[0]
        // window.addEventListener('scroll', (e) => {
        //   let scrollTop = document.body.scrollTop || document.documentElement.scrollTop
        //   if (scrollTop < 0) {
        //     serach.setAttribute('class', 'serach-link scrollhidde')
        //   } else {
        //     if (scrollTop >= bannerH / 2) {
        //       serach.setAttribute('class', 'serach-link scrollTop')
        //     } else {
        //       serach.setAttribute('class', 'serach-link')
        //     }
        //   }
        // })
      },
      getMore: function () {
        this.getProduct()
      }
    },
    directives: {
      scroll: {
        bind: function (el, binding) {
          window.addEventListener('scroll', (e) => {
            if ((document.body.scrollTop || document.documentElement.scrollTop) + window.innerHeight >= el.clientHeight) {
              let getMore = binding.value
              getMore()
            }
          })
        }
      }
    },
    created () {
      // 获取ios的系统 版本 11 9 8
      if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
        var str = navigator.userAgent.toLowerCase()
        var ver = str.match(/cpu iphone os (.*?) like mac os/)
        this.iOS_num = parseFloat(ver[1].split('_')[0])
      }
    },
    mounted () {
      this.init()
      // 清空搜索关键字
      if (localStorage.keyword) {
        localStorage.removeItem('keyword')
      }
      setTimeout(function () {
        document.body.scrollTop = 0
        document.documentElement.scrollTop = 0
      }, 500)
    },
    destroyed () {
      Vue.prototype.$tools.lookmore(false)
    }
  }
</script>
<style>
  /* 在此定义当前页面css */
  #page-index{overflow: hidden;}
  .page-index .u-item .icon-tex-stock{left: 0px;right: 0px;width: 100%;z-index: 20}
  .swiper-slide img{display: block}
  .page-index .m-pro .u-hd{line-height: 45px;overflow: hidden;}
  .page-index .m-pro .u-hd span:before,.page-index .m-pro .u-hd span:after{top: 22px;}
  .page-index .u-hd span i{font-size: 10px;margin: 0 5px;}
</style>
